<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<title>Marvin JS Example - Change the default tool</title>
	<link type="text/css" rel="stylesheet" href="../css/doc.css" />
	<link type="text/css" rel="stylesheet" href="../js/lib/rainbow/github.css" />
	<script src="../js/lib/jquery-1.9.1.min.js"></script>
	<script src="../js/lib/rainbow/rainbow-custom.min.js"></script>
	<script src="../gui/lib/promise-1.0.0.min.js"></script>
	<script src="../js/marvinjslauncher.js"></script>
	<script>

		var marvinSketcherInstance;

		$(document).ready(function handleDocumentReady (e) {
			// after editor in the sketch iframe is ready store its reference 
			// and activate controls
			MarvinJSUtil.getEditor("#sketch").then(function (sketcherInstance) {
				marvinSketcherInstance = sketcherInstance;
				initControls();
			},function (error) {
				alert("Cannot retrieve sketcher instance from iframe:"+error);
			});
		});

		function initControls () {
			// change layout
			$("input[name='defaulttool-group']").change(function(e) {
				var s = $(this).val();
				updateDefaultTool(s);
			});
		}

		function updateDefaultTool(tool) {
			marvinSketcherInstance.setDisplaySettings({
				"defaultTool": tool
			});
		}

	</script>
</head>
<body>
	<h1>Marvin JS Example - Change default tool</h1>
	<div style="clear: both; width: 100%; text-align: right;"><a href="index.html">Back to index</a></div>
	<div class="darkbox">
		<div style="padding-bottom: 0.8em;">
			<input type="radio" name="defaulttool-group" value="rectangleSelection" checked>Rectangle</input>
			<input type="radio" name="defaulttool-group" value="lassoSelection">Lasso</input>
		</div>
		<div class="resizable">
			<iframe src="../editorws.html" id="sketch" class="sketcher-frame" data-toolbars="standard"></iframe>
		</div>
	</div>
	<div>
	<p>In this example, you can change the default tool of the editor.
	Select the default tool. <strong>Default tool is not the same as the actual tool of the editor.</strong> By contrast the actual tool, default tool has relevance in such situations when it is not clear which tool should be activated. In these cases you can denote a tool which should be selected as the default one. For example after pushing the Esc keyboard button.</p>
	<p><pre><code data-language="html">
	&lt;div style=&quot;padding-bottom: 0.8em;&quot;&gt;
		&lt;input type=&quot;radio&quot; name=&quot;defaulttool-group&quot; value=&quot;rectangleSelection&quot; checked&gt;Rectangle&lt;/input&gt;
		&lt;input type=&quot;radio&quot; name=&quot;defaulttool-group&quot; value=&quot;lassoSelection&quot;&gt;Lasso&lt;/input&gt;
	&lt;/div&gt;
	</code></pre></p>
		
	<p>When you take a look at the source code, you can see that a listener function is bound to the change events of radio buttons.
		When a change event is invoked, the <code>updateDefaultTool(value)</code> function is performed.
		This function assembles a JavaScript object that describes display settings and call the <code>setDisplaySettings(settings)</code> function of the sketcher. 
		Only give settings that you would like to overwrite. In this case, this is the <strong>defaultTool</strong> property.</p>

	<p><pre><code data-language="html">
		var marvinSketcherInstance;

		$(document).ready(function handleDocumentReady (e) {
			// after editor in the sketch iframe is ready store its reference 
			// and activate controls
			MarvinJSUtil.getEditor("#sketch").then(function (sketcherInstance) {
				marvinSketcherInstance = sketcherInstance;
				initControls();
			},function (error) {
				alert("Cannot retrieve sketcher instance from iframe:"+error);
			});
		});

		function initControls () {
			// change layout
			$("input[name='defaulttool-group']").change(function(e) {
				var s = $(this).val();
				updateDefaultTool(s);
			});
		}

		function updateDefaultTool(tool) {
			marvinSketcherInstance.setDisplaySettings({
				"defaultTool": tool
			});
		}</code></pre></p>
	</div>
	<div style="clear: both; width: 100%; text-align: right;"><a href="index.html">Back to index</a></div>
</body>
</html>
